<script>
export default {
  name: 'DesignImage',
}
</script>
<template>
  <div class="design">
    <template v-if="formData.advancedConfig?.urlList.length">
      <img
        :src="formData.advancedConfig?.urlList[0].url"
        alt=""
        class="image"
      />
    </template>
    <template v-else>
      <div class="preview-noData">
        {{ formData.name }}
      </div>
    </template>
  </div>
</template>
<script setup>
let props = defineProps({
  formData: {
    type: Object,
    default: () => {},
  },
})
let { formData } = toRefs(props)
</script>
<style scoped lang="scss">
.design {
  width: 100%;
  height: 100%;
}
.image {
  width: 100%;
  height: 100%;
}
.preview-noData {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 16px;
  font-weight: bold;
}
</style>
